<template>
  <div class="chart-scroll-container">
    <div class="chart-container">
      <div class="chart-header">
        <ChartSelect chart-id="electric" v-model="chartState" />
      </div>
      <el-card class="chart-card" body-style="flex: 1; padding: 0;">
        <template v-if="!chartData || !chartOptions">
          <div class="empty-container">
            <el-empty v-if="!chartOptions && chartState.period == 'half_hour' && !meterStore.currentMeter"
              description="请选择具体的表计查看分时数据" :image-size="emptyImageSize" class="custom-empty" />
            <el-empty v-else description="暂无数据" :image-size="emptyImageSize" class="custom-empty" />
          </div>
        </template>
        <div v-else class="chart-wrapper">
          <BaseChart :options="chartOptions" :key="`${chartState.period}-${chartState.comparison}`"
            class="base-chart" />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import ChartSelect from './components/ChartSelect.vue'
import { useReportStore } from '@/stores/report'
import { useMeterStore } from '@/stores/meter'
import dayjs from 'dayjs'
import { getComparisonName, getConfig } from '@/utils/report'

const meterStore = useMeterStore()
const reportStore = useReportStore()

const chartState = computed({
  get: () => reportStore.chartState,
  set: (value) => reportStore.chartState = value
})

// 响应式空状态图片大小
const emptyImageSize = computed(() => {
  if (window.innerWidth <= 480) return 80
  if (window.innerWidth <= 768) return 100
  return 120
})

const chartData = computed(() => {
  const period = chartState.value.period
  if (period === 'week') {
    return reportStore.fourWeekData
  }
  const reportData = reportStore.getReportDataList(period)
  return reportData?.data || []
})

const chartOptions = computed(() => {
  const data = chartData.value
  if (!data || data.length === 0) {
    return null
  }

  const period = chartState.value.period
  const comparison = chartState.value.comparison // 明确获取当前的comparison值
  const config = getConfig(period)
  let series = []
  let xAxisData = []

  if (period === 'week') {
    xAxisData = data[0]?.data.map(item => dayjs(item.time).format('ddd')) || []
    series = data.map(item => ({
      name: item.name,
      data: item.data.map(d => d.value.toFixed(2)),
      type: chartState.value.chartType,
      yAxisIndex: 0
    }))
  } else {
    xAxisData = data.map(item => dayjs(item.time).format(config.format))
    series = [{
      name: config.label,
      data: data.map(item => (+item.value).toFixed(2)),
      type: chartState.value.chartType,
      showExtremum: true,
      yAxisIndex: 0
    }]
  }

  // 最后添加对比数据 - 只有当comparison不为'none'时才添加
  if (comparison !== 'none' && ['half_hour', 'day', 'month'].includes(period)) {
    const comparisonData = reportStore.getComparisonData(period)
    if (comparisonData && comparisonData.length > 0) {
      series.push({
        name: getComparisonName(chartState.value, comparison),
        data: comparisonData.map(item => item.value.toFixed(2)),
        type: 'line',
        yAxisIndex: 0,
      })
    }
  }

  return {
    key: `${period}-${comparison}`, // 添加组合键确保重新渲染
    xAxisData,
    yAxisUnit: 'kWh',
    series,
    showMarkLine: true,
    showZoom: true,
    legend: {
      show: true,
      data: period === 'week' ? data.map(item => item.name) : [config.label]
    },
  }
})
</script>

<style scoped>
.chart-scroll-container {
  flex: 1;
  height: 100%;
}

.chart-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  /* 防止flex子元素溢出 */
}

.chart-header {
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.chart-card {
  height: 100% !important;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  flex: 1;
  min-height: 400px;
}

.empty-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.chart-wrapper {
  height: 100%;
  width: 100%;
  margin-top: 1rem;
  box-sizing: border-box;
}

.base-chart {
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.custom-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 平板端适配 */
@media screen and (max-width: 992px) and (min-width: 769px) {
  .chart-wrapper {
    padding: 0.8rem;
  }

  .base-chart {
    min-height: 280px;
  }

  .empty-container {
    padding: 1.5rem;
  }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .chart-wrapper {
    margin-top: 0.5rem;
    padding: 0.5rem;
  }

  .base-chart {
    min-height: 250px;
  }

  .empty-container {
    padding: 1rem;
  }

  .chart-header {
    margin-bottom: 0.75rem;
  }

  .chart-card {
    min-height: 350px;
  }
}

/* 小尺寸移动端适配 */
@media screen and (max-width: 480px) {
  .chart-wrapper {
    padding: 0.25rem;
  }

  .base-chart {
    min-height: 220px;
  }

  .empty-container {
    padding: 0.75rem;
  }
}
</style>